<template>
    <div>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
            background-color="#fff" text-color="#000" active-text-color="#67C23A">

            <el-menu-item index="1">好友</el-menu-item>
            <el-menu-item index="2">群聊</el-menu-item>
            <el-menu-item index="3">发现</el-menu-item>

            <el-menu-item index="4">
                <el-input v-model="input" placeholder="请输入内容">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-menu-item>

            <el-menu-item index="5">
                <el-avatar :size=39 :src="circleUr"></el-avatar>
            </el-menu-item>
            <el-menu-item index="6" id="item">{{username}}</el-menu-item>

            <el-menu-item index="7">登录</el-menu-item>
            <el-menu-item index="8">注册</el-menu-item>

        </el-menu>

        <!-- <div class="line"></div> -->


    </div>

</template>


<style>
.el-menu--horizontal>.el-menu-item{
    float: right;
}

el-menu {background-image:url('https://api.dujin.org/bing/1920.php');}
</style>



<script>
    export default {
        name: 'Navigation',


        data() {
            return {
                input: '',
                activeIndex: '1',

                // circleUr: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                circleUr:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            };

        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        },
        props: {
            username: String
        }
    }
</script>